import React, { useState } from 'react';
import { Popover } from 'antd';
import Tab from './Tab';

function PopTab(props) {
  const [visible, setVisible] = useState(false);
  function handleVisibleChange(visible) {
    setVisible(visible);
  }
  function mountElement() {
    if (props.modelId) {
      return document.getElementById(props.modelId).parentNode;
    }
    return document.body;
  }
  return (
    <>
      {props.disabled ? (
        <span>{props.children}</span>
      ) : (
        <Popover
          content={
            <Tab
              variable={props.variable}
              value={props.value}
              type={props.type}
              onHandleVisible={handleVisibleChange}
              onSetValue={props.onSetValue}
            />
          }
          placement='bottom'
          trigger='click'
          visible={visible}
          getPopupContainer={mountElement}
          onVisibleChange={handleVisibleChange}
        >
          <span>{props.children}</span>
        </Popover>
      )}
    </>
  );
}

export default PopTab;
